<template>
	<view>
		<view class="row">
			<view class="cell" v-for="(item,index) in img" :key="index">
				<view class="btn">
					<image :src="item"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: ["https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/a1.png",
					"https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/b1.png",
					"https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/d1.png",
					"https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/c-z-2.png",
					"https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/c-c-2.png",
					"https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/c-w-2.png",
					"https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/a1.png",
						"https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/b1.png",
						"https://6e69-niew6-1302638010.tcb.qcloud.la/%E6%96%B0%E6%8B%9F%E6%80%81%E5%9B%BE%E6%A0%87/d1.png",
				]
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #3d444c;
	}

	.row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		.cell {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 30%;
			height: 300rpx;

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
				background: #373d44;
				box-shadow: 5px 5px 10px #16181b,
					-5px -5px 10px #58626d;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
</style>
